  .p-button{
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 2px;
    outline: 0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
 }

 .p-button.p-button-lg{
    height: 44px;
    line-height: 44px;
    font-size: 14.5px;
    padding: 0 17px;
  }
  .p-button.p-button-md{
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    font-size: 14px;
  }
  .p-button.p-button-sm{
    height: 36px;
    line-height: 36px;
    font-size: 13.5px;
    padding: 0 13px;
  }
  .p-button.p-button-xs{
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    padding: 0 11px;
  }

  .p-button.p-button-default{
    color: #2f495e;
    background-color: #edf2f7;
  }
  .p-button.p-button-primary{
    background-color: #00c58e;
    color: white;
  }
  .p-button.p-button-failure{
    background-color: #f56c6c;
    color: white;
  }
  .p-button.p-button-warming{
    background-color: #f6ad55;
    color: white;
  }
  
  .p-button.p-button-loading{
    cursor:not-allowed;
    opacity: 0.6;  
  }
      
  .p-button.p-button-loading .load{
    animation:turn 1.0s linear infinite; 
    fill:currentColor;
    display: inline-block;
  }
  
  .p-button.p-button-warming .load,
  .p-button.p-button-failure .load,
  .p-button.p-button-success .load,
  .p-button.p-button-primary .load{
    fill:currentColor;
    color: white;
  }
      
  .p-button.p-button-disabled{
    cursor:not-allowed;
    opacity: 0.6;  
  }
      
  .p-button.p-button-round{
     border-radius: 50px;
  }
      
  .p-button[full]{
    width: 100%;
  }
      
  .p-button[ripple] {
    position: relative;
    overflow: hidden;
  }
      
  .p-button[ripple]:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, gray 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity .7s;
  }
      
  .p-button[ripple]:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
  }
  
  .p-button.p-button-success[ripple]:after,
  .p-button.p-button-primary[ripple]:after, 
  .p-button.p-button-failure[ripple]:after, 
  .p-button.p-button-warning[ripple]:after{
    background-image: radial-gradient(circle, white 10%, transparent 10.01%);
  }

  @keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  } 